<template>
  <div class="h-full w-full flex flex-col justify-between">
    <div class="form pt-[15px]">
      <el-form>
        <el-row :gutter="12">
          <el-col :span="3">
            <el-form-item>
              <el-input v-model="form.name" placeholder="用户名/昵称/备注" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <div class="w-full flex justify-between">
                <el-date-picker
                  v-model="form.date"
                  type="daterange"
                  unlink-panels
                  range-separator="－"
                  start-placeholder="选择开始时间"
                  end-placeholder="选择结束时间"
                  :disabled-date="disableFutureDates"
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item>
              <el-button type="primary" @click.stop="search">搜索</el-button>
              <el-button type="danger" @click.stop="handleRefresh">清空</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="grow-[1] h-0">
      <el-table
        scrollbar-always-on
        ref="elTableRef"
        v-loading="state.loading"
        :data="list"
        style="width: 100%"
        height="100%"
        border
        stripe
        fit
      >
        <template #empty>
          <ui-empty />
        </template>
        <el-table-column align="center" prop="Name" label="用户名">
          <template #default="{ row }: TableItem">
            {{ row.Name || "--" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="Nickname" label="昵称" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            {{ row.Nickname || "--" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="Level" label="代理等级" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            {{ row.Level + "级代理" || "--" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="Note" label="备注" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            {{ row.Note || "--" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="LotteryName" label="游戏" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            {{ row.LotteryName || "--" }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="BetAmount"
          label="时间"
          show-overflow-tooltip
          width="170"
        >
          <template #default="{ row }: TableItem">
            {{ formatDate(row.CreatedAt) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="Coin" label="佣金" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            <ui-amount :num="row.Coin"></ui-amount>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="BetAmount" label="佣金流水" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            <ui-amount :num="row.BetAmount"></ui-amount>
          </template>
        </el-table-column>
        <el-table-column prop="BackRate" label="抽佣比例" align="center" width="100">
          <template #default="{ row }: TableItem"> {{ row.BackRate * 100 }}% </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-between my-[10px]">
      <div class="flex-1 w-0 mr-[20px]">
        <el-alert
          title="注意：返佣报表中的旗下流水，是按操作返佣当时的时间统计。比如昨天有500流水没有返佣，在今天操作了返佣，那昨天的流水在返佣报表中是统计在今天。报表最多保留两月数据。"
          type="warning"
          show-icon
          :closable="false"
        />
      </div>
      <ui-pagination
        :total="state.total"
        v-model:pageSize="state.pageSize"
        v-model:currentPage="state.page"
        @current-change="getData"
      ></ui-pagination>
    </div>
  </div>
</template>
<script setup lang="ts">
import moment from "moment";
import { useList } from "@/hooks/useList";
import { reqReportAgentRebate } from "@/api/report";
import { disableFutureDates, formatDate, getDateArray } from "@/utils/common";

interface TableItem {
  row: ReportRebateCoinMo;
}

const form = reactive({
  name: "",
  date: getDateArray()["today"]
});

const getParams = () => {
  const params: any = {
    StartDate: moment(form.date[0]).format("YYYY-MM-DD 00:00:00"),
    EndDate: moment(form.date[1]).format("YYYY-MM-DD 23:59:59")
  };
  if (form.name) {
    params.Name = form.name;
  }
  return params;
};
const { elTableRef, state, list, getData, search } = useList<ReportRebateCoinMo, any>(
  reqReportAgentRebate,
  getParams
);

// 重置
const handleRefresh = () => {
  form.name = "";
  form.date = getDateArray()["today"];
  search();
};

onMounted(() => {
  getData();
});
</script>
